<template>
	<div class="addEdit-block" :style='{ "padding": "30px 5%" }' style="width: 100%;">
		<el-form :style='{ "borderRadius": "6px", "padding": "30px" }' class="add-update-preview" ref="ruleForm"
			:model="ruleForm" :rules="rules" label-width="140px">
			<template>

				<el-form-item :style='{"width":"45%","margin":"0 2% 20px 0","display":"inline-block"}' class="select"
					v-if="type!='info' && rolename != '物业人员'" label="物业人员" prop="wuyerenyuan">
					<el-select :disabled="ro.wuyerenyuan" v-model="ruleForm.wuyerenyuan" placeholder="请选择物业人员">
						<el-option v-for="(item,index) in wuyerenyuanOptions" v-bind:key="index" :label="item"
							:value="item">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item :style='{"width":"45%","margin":"0 2% 20px 0","display":"inline-block"}' v-if="type=='info' && rolename != '物业人员'"
					class="input" label="物业人员" prop="wuyerenyuan">
					<el-input v-model="ruleForm.wuyerenyuan" placeholder="物业人员" readonly></el-input>
				</el-form-item>




		


				<el-form-item :style='{ "width": "45%", "margin": "0 2% 20px 0", "display": "inline-block" }'
					class="upload" v-if="type != 'info' && !ro.zhaopian" label="报修照片" prop="zhaopian">
					<file-upload tip="点击上传报修图片" action="file/upload" :limit="3" :multiple="true"
						:fileUrls="ruleForm.zhaopian ? ruleForm.zhaopian : ''"
						@change="zhaopianUploadChange"></file-upload>
				</el-form-item>
				<el-form-item :style='{ "width": "45%", "margin": "0 2% 20px 0", "display": "inline-block" }'
					class="upload" v-else-if="ruleForm.zhaopian" label="房屋图片" prop="zhaopian">
					<img v-if="ruleForm.zhaopian.substring(0, 4) == 'http'" class="upload-img"
						style="margin-right:20px;" v-bind:key="index" :src="ruleForm.zhaopian.split(',')[0]"
						width="100" height="100">
					<img v-else class="upload-img" style="margin-right:20px;" v-bind:key="index"
						v-for="(item, index) in ruleForm.zhaopian.split(',')" :src="$base.url + item" width="100"
						height="100">
				</el-form-item>



				<el-form-item :style='{"width":"45%","margin":"0 2% 20px 0","display":"inline-block"}' class="select"
					v-if="type!='info' && rolename != '用户' " label="维修状态" prop="zhuangtai">
					<el-select :disabled="ro.zhuangtai" v-model="ruleForm.zhuangtai" placeholder="请选择维修状态">
						<el-option v-for="(item,index) in zhuangtaiOptions" v-bind:key="index" :label="item"
							:value="item">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item :style='{"width":"45%","margin":"0 2% 20px 0","display":"inline-block"}' v-if="type == 'info' && rolename != '用户'"
					class="input" label="维修状态" prop="zhuangtai">
					<el-input v-model="ruleForm.zhuangtai" placeholder="维修状态" readonly></el-input>
				</el-form-item>
			

				<el-form-item :style='{ "width": "45%", "margin": "0 2% 20px 0", "display": "inline-block" }'
					class="input" v-if="type != 'info'" label="报修内容" prop="baoxiuneirong">
					<el-input v-model="ruleForm.baoxiuneirong" placeholder="报修内容" clearable
						:readonly="ro.baoxiuneirong"></el-input>
				</el-form-item>
				<el-form-item :style='{ "width": "45%", "margin": "0 2% 20px 0", "display": "inline-block" }' v-else
					class="input" label="报修内容" prop="baoxiuneirong">
					<el-input v-model="ruleForm.baoxiuneirong" placeholder="报修内容" readonly></el-input>
				</el-form-item>


				





			</template>

			<el-form-item :style='{ "padding": "0", "margin": "0" }' class="btn">
				<el-button
					:style='{ "border": "0", "cursor": "pointer", "padding": "0", "margin": "0 20px 0 0", "outline": "none", "color": "rgba(255, 255, 255, 1)", "borderRadius": "4px", "background": "rgba(222, 216, 156, 1)", "width": "128px", "lineHeight": "40px", "fontSize": "14px", "height": "40px" }'
					v-if="type != 'info'" type="primary" class="btn-success" @click="onSubmit">提交</el-button>
				<el-button
					:style='{ "border": "1px solid rgba(222, 216, 156, 1)", "cursor": "pointer", "padding": "0", "margin": "0", "outline": "none", "color": "rgba(222, 216, 156, 1)", "borderRadius": "4px", "background": "rgba(255, 255, 255, 1)", "width": "128px", "lineHeight": "40px", "fontSize": "14px", "height": "40px" }'
					v-if="type != 'info'" class="btn-close" @click="back()">取消</el-button>
				<el-button
					:style='{ "border": "1px solid rgba(222, 216, 156, 1)", "cursor": "pointer", "padding": "0", "margin": "0", "outline": "none", "color": "rgba(222, 216, 156, 1)", "borderRadius": "4px", "background": "rgba(255, 255, 255, 1)", "width": "128px", "lineHeight": "40px", "fontSize": "14px", "height": "40px" }'
					v-if="type == 'info'" class="btn-close" @click="back()">返回</el-button>
			</el-form-item>
		</el-form>


	</div>
</template>
<script>
// 数字，邮件，手机，url，身份证校验
import { isNumber, isIntNumer, isEmail, isPhone, isMobile, isURL, checkIdCard } from "@/utils/validate";
export default {
	data() {
		let self = this
		
		return {
			id: '',
			type: '',
			
			zhuangtaiOptions:[],

			wuyerenyuanOptions:[],

			ro: {
				wuyerenyuan: false,
				zhuangtai: false,
				baoxiuneirong: false,
				zhaopian: false,
			},


			ruleForm: {
				wuyerenyuan: '',
				zhuangtai: '',
				baoxiuneirong: '',
				zhaopian: '',
			},

			rolename: '',
		};
	},
	props: ["parent"],
	computed: {



	},
	created() {
		//this.ruleForm.fangkeshijian = this.getCurDate()
	},
	methods: {

		// 下载
		download(file) {
			window.open(`${file}`)
		},
		// 初始化
		init(id, type) {


			this.rolename = this.$storage.get('role')

			console.log(this.rolename)

			this.$http({
				url: `option/wuyerenyuan/xingming`,
				method: "get"
            }).then(({ data }) => {
				if (data && data.code === 0) {
					this.wuyerenyuanOptions = data.data;
				} else {
					this.$message.error(data.msg);
				}
            });


			this.zhuangtaiOptions = "待处理,处理中,已完成".split(',');

			if (id) {
				this.id = id;
				this.type = type;
			}
			if (this.type == 'info' || this.type == 'else') {
				this.info(id);
			} else if (this.type == 'logistics') {
				this.logistics = false;
				this.info(id);
			} else if (this.type == 'cross') {
				var obj = this.$storage.getObj('crossObj');
				for (var o in obj) {
					if (o == 'wuyerenyuan') {
						this.ruleForm.wuyerenyuan = obj[o];
						this.ro.wuyerenyuan = true;
						continue;
					}
					if (o == 'zhuangtai') {
						this.ruleForm.zhuangtai = obj[o];
						this.ro.zhuangtai = true;
						continue;
					}
					if (o == 'baoxiuneirong') {
						this.ruleForm.baoxiuneirong = obj[o];
						this.ro.baoxiuneirong = true;
						continue;
					}
					if (o == 'zhaopian') {
						this.ruleForm.zhaopian = obj[o];
						this.ro.zhaopian = true;
						continue;
					}
		
				}
			}

			// 获取用户信息
			this.$http({
				url: `${this.$storage.get('sessionTable')}/session`,
				method: "get"
			}).then(({ data }) => {
				if (data && data.code === 0) {

					var json = data.data;
				} else {
					this.$message.error(data.msg);
				}
			});

			

		},
		// 多级联动参数

		info(id) {

			this.$http({
				url: `yonghubaoxiu/info/${id}`,
				method: "get"
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.ruleForm = data.data;
					//解决前台上传图片后台不显示的问题
					let reg = new RegExp('../../../upload', 'g')//g代表全部
					this.ruleForm.zhaopian = this.ruleForm.zhaopian.replace(reg, '../../../community/upload');
				} else {
					this.$message.error(data.msg);
				}
			});
		},


		// 提交
		onSubmit() {








			if (this.ruleForm.erweima != null) {
				this.ruleForm.erweima = this.ruleForm.erweima.replace(new RegExp(this.$base.url, "g"), "");
			}













			var objcross = this.$storage.getObj('crossObj');

			//更新跨表属性
			var crossuserid;
			var crossrefid;
			var crossoptnum;
			if (this.type == 'cross') {
				var statusColumnName = this.$storage.get('statusColumnName');
				var statusColumnValue = this.$storage.get('statusColumnValue');
				if (statusColumnName != '') {
					var obj = this.$storage.getObj('crossObj');
					if (statusColumnName && !statusColumnName.startsWith("[")) {
						for (var o in obj) {
							if (o == statusColumnName) {
								obj[o] = statusColumnValue;
							}
						}
						var table = this.$storage.get('crossTable');
						this.$http({
							url: `${table}/update`,
							method: "post",
							data: obj
						}).then(({ data }) => { });
					} else {
						crossuserid = this.$storage.get('userid');
						crossrefid = obj['id'];
						crossoptnum = this.$storage.get('statusColumnName');
						crossoptnum = crossoptnum.replace(/\[/, "").replace(/\]/, "");
					}
				}
			}
			this.$refs["ruleForm"].validate(valid => {
				if (valid) {
					if (crossrefid && crossuserid) {
						this.ruleForm.crossuserid = crossuserid;
						this.ruleForm.crossrefid = crossrefid;
						let params = {
							page: 1,
							limit: 10,
							crossuserid: this.ruleForm.crossuserid,
							crossrefid: this.ruleForm.crossrefid,
						}
						this.$http({
							url: "yonghubaoxiu/page",
							method: "get",
							params: params
						}).then(({
							data
						}) => {
							if (data && data.code === 0) {
								if (data.data.total >= crossoptnum) {
									this.$message.error(this.$storage.get('tips'));
									return false;
								} else {
									this.$http({
										url: `yonghubaoxiu/${!this.ruleForm.id ? "save" : "update"}`,
										method: "post",
										data: this.ruleForm
									}).then(({ data }) => {
										if (data && data.code === 0) {
											this.$message({
												message: "操作成功",
												type: "success",
												duration: 1500,
												onClose: () => {
													this.parent.showFlag = true;
													this.parent.addOrUpdateFlag = false;
													this.parent.fangwuxinxiCrossAddOrUpdateFlag = false;
													this.parent.search();
													this.parent.contentStyleChange();
												}
											});
										} else {
											this.$message.error(data.msg);
										}
									});

								}
							} else {
							}
						});
					} else {
						this.$http({
							url: `yonghubaoxiu/${!this.ruleForm.id ? "save" : "update"}`,
							method: "post",
							data: this.ruleForm
						}).then(({ data }) => {
							if (data && data.code === 0) {
								this.$message({
									message: "操作成功",
									type: "success",
									duration: 1500,
									onClose: () => {
										this.parent.showFlag = true;
										this.parent.addOrUpdateFlag = false;
										this.parent.fangwuxinxiCrossAddOrUpdateFlag = false;
										this.parent.search();
										this.parent.contentStyleChange();
									}
								});
							} else {
								this.$message.error(data.msg);
							}
						});
					}
				}
			});
		},
		// 获取uuid
		getUUID() {
			return new Date().getTime();
		},
		// 返回
		back() {
			this.parent.showFlag = true;
			this.parent.addOrUpdateFlag = false;
			this.parent.fangwuxinxiCrossAddOrUpdateFlag = false;
			this.parent.contentStyleChange();
		},
		zhaopianUploadChange(fileUrls) {
			this.ruleForm.zhaopian = fileUrls;
		},
	}
};
</script>
<style lang="scss" scoped>
.amap-wrapper {
	width: 100%;
	height: 500px;
}

.search-box {
	position: absolute;
}

.el-date-editor.el-input {
	width: auto;
}

.add-update-preview .el-form-item /deep/ .el-form-item__label {
	padding: 0 10px 0 0;
	color: #666;
	font-weight: 500;
	width: 140px;
	font-size: 14px;
	line-height: 40px;
	text-align: right;
}

.add-update-preview .el-form-item /deep/ .el-form-item__content {
	margin-left: 140px;
}

.add-update-preview .el-input /deep/ .el-input__inner {
	border: 2px solid rgba(213, 210, 195, 1);
	border-radius: 4px;
	padding: 0 12px;
	outline: none;
	color: #000;
	width: 280px;
	font-size: 14px;
	height: 40px;
}

.add-update-preview .el-select /deep/ .el-input__inner {
	border: 2px solid rgba(213, 210, 195, 1);
	border-radius: 4px;
	padding: 0 10px;
	outline: none;
	color: #000;
	width: 200px;
	font-size: 14px;
	height: 40px;
}

.add-update-preview .el-date-editor /deep/ .el-input__inner {
	border: 2px solid rgba(213, 210, 195, 1);
	border-radius: 4px;
	padding: 0 10px 0 30px;
	outline: none;
	color: #000;
	width: 200px;
	font-size: 14px;
	height: 40px;
}

.add-update-preview /deep/ .el-upload--picture-card {
	background: transparent;
	border: 0;
	border-radius: 0;
	width: auto;
	height: auto;
	line-height: initial;
	vertical-align: middle;
}

.add-update-preview /deep/ .upload .upload-img {
	border: 2px dashed rgba(213, 210, 195, 1);
	cursor: pointer;
	border-radius: 6px;
	color: #999;
	width: 150px;
	font-size: 32px;
	line-height: 150px;
	text-align: center;
	height: 150px;
}

.add-update-preview /deep/ .el-upload-list .el-upload-list__item {
	border: 2px dashed rgba(213, 210, 195, 1);
	cursor: pointer;
	border-radius: 6px;
	color: #999;
	width: 150px;
	font-size: 32px;
	line-height: 150px;
	text-align: center;
	height: 150px;
}

.add-update-preview /deep/ .el-upload .el-icon-plus {
	border: 2px dashed rgba(213, 210, 195, 1);
	cursor: pointer;
	border-radius: 6px;
	color: #999;
	width: 150px;
	font-size: 32px;
	line-height: 150px;
	text-align: center;
	height: 150px;
}

.add-update-preview .el-textarea /deep/ .el-textarea__inner {
	border: 2px solid rgba(213, 210, 195, 1);
	border-radius: 4px;
	padding: 12px;
	outline: none;
	color: #000;
	width: 300px;
	font-size: 14px;
	height: 120px;
}
</style>
